<template>
	<view class="my-page">
		<view class="my-page-body">
			<view class="avatar-body">
				<sxran-im-avatar v-if="userInfo.avatar" size='80' :src='userInfo.avatar' ></sxran-im-avatar>
				<sxran-im-avatar v-else size='80' :text="userInfo.nick"></sxran-im-avatar>
				<view class="nickname">
					<sxran-im-text :text='userInfo.nick' size='26' bold></sxran-im-text>
				</view>
			</view>
			
			<view>
				<sxran-im-list-item title="通用" :showExtraIcon='false'>
					<template v-slot:right>
						<sxran-im-icon name="arrow-right"></sxran-im-icon>
					</template>
				</sxran-im-list-item>
				<sxran-im-list-item title="设置" :showExtraIcon='false'>
					<template v-slot:right>
						<sxran-im-icon name="arrow-right"></sxran-im-icon>
					</template>
				</sxran-im-list-item>
				<sxran-im-list-item title="主题" :showExtraIcon='false'>
					<template v-slot:right>
						<sxran-im-icon name="arrow-right"></sxran-im-icon>
					</template>
				</sxran-im-list-item>
			</view>
			
			<view class="out-btn">
				<button type="warn" @click="logout">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		computed:{
			userInfo:function(){
				return uni.$Im.getCurrentUserInfo();
			}
		},
		methods:{
			logout(){
				uni.$Im.logout(()=>{
					uni.reLaunch({
						url:'/uni_modules/sxran-im-modules/pages/login/login'
					})
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-page{
		.my-page-body{
			
			.avatar-body{
				padding: 30px 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.nickname{
					padding: $uni-spacing-col-lg 0;
				}
			}
			.out-btn{
				padding: $uni-spacing-col-lg  $uni-spacing-col-base;
			}
		}
	}
</style>